layui.use(function () {
  var form = layui.form;


  form.on('submit(search)', function (data) {
    var params = {};
    params.oilCode = data.field.oilCode;
    params.ssStatus = data.field.ssStatus;
    params.maStatus = data.field.maStatus;
    params.code = data.field.code;
    params.name = data.field.name;
    queryRecord(params);
    return false;
  });
  $('#submit-search').click()


});



function rowspanFun(data, nameList) {
  for (var i = 0; i < nameList.length; i++) {
    var name = nameList[i];
    var startRow = 0;
    var endRow = data.length;
    var mergeNum = 1;
    if (endRow != 1) {
      for (var j = startRow; j < endRow; j++) {
        if (j == endRow - 1) { //判断是否是最后一个元素
          if (startRow == endRow - 1) {
            data[j][name + 'Rowspan'] = 1;
          }
        } else {
          if (data[startRow][name] == data[j + 1][name]) {
            data[j + 1][name + 'Rowspan'] = 0;
            mergeNum = mergeNum + 1;
            data[startRow][name + 'Rowspan'] = mergeNum;
          } else {
            startRow = j + 1;
            if (mergeNum > 1) {
              data[startRow][name + 'Rowspan'] = 1;
            } else {
              data[j][name + 'Rowspan'] = 1;
            }
            mergeNum = 1;
          }
        }
      }
    } else {
      data[0][name + 'Rowspan'] = 1;
    }
  }
  return data;
}


queryRecord = (params) => {
  AjaxRequest('/valve/list/all?oilCode=' + params.oilCode + '&ssStatus=' + params.ssStatus + '&maStatus=' + params.maStatus
    + '&code=' + params.code + '&name=' + params.name
    , callback)
  function callback(result) {

    var data = result.result;

    var newD = []

    data.forEach(e => {
      newD.push({
        'oilName': e.oilName,
        'name': e.name,
        'code': e.code,
        'maStatusDesc': e.maStatusDesc,
        'maTime': e.maTime,
        'ssStatusDesc': e.ssStatusDesc,
        'ssTime': e.ssTime,
        'op': e.id,
      })

    });


    var rowT = []

    for (const key in newD[0]) {
      rowT.push(key)
    }

    var newD = rowspanFun(newD, rowT);


    $('tr').empty().append(rowT.reduce((x, y) => {
      var rName = '';

      switch (y) {
        case 'oilName':
          rName = '所属油罐'
          break;
        case 'name':
          rName = '阀门名称'
          break;
        case 'code':
          rName = '阀门编号'
          break;
        case 'maStatusDesc':
          rName = '本地丨远程状态'
          break;
        case 'maTime':
          rName = '本地丨远程更新时间'
          break;
        case 'ssStatusDesc':
          rName = '阀门开关'
          break;
        case 'ssTime':
          rName = '开关更新时间'
          break;
        case 'op':
          rName = '操作'
          break;

        default:
          break;
      }



      return x + `<th>${rName}</th>`

    }, ''))



    $('tbody').empty().append(newD.reduce((x, y) => {

      return x + `
                  <tr >`+
        rowT.reduce((x1, y1, i) => {

          if (i > 0) {

            if (i == 7) {//最后一行加上操作按钮

              let disabled;



              if (y.maStatusDesc == '本地') {
                disabled = 2;
              } else {
                if (y.ssStatusDesc == "打开") {
                  disabled = 0;
                } else if (y.ssStatusDesc == "关闭") {
                  disabled = 1;
                }

              }

              return x1 +
                `<td style="text-align:center;">
                <div class="data-tool">
                  <div onclick=deviceOp("${y[rowT[i]]}",1) class="${(disabled == 0 || disabled == 2) ? 'prohibitClick' : ''}"><img src="../static/img/start.png">打开</div>
                  <div onclick=deviceOp("${y[rowT[i]]}",0) class="${(disabled == 1 || disabled == 2) ? 'prohibitClick' : ''}"><img src="../static/img/stop.png">关闭</div>
                </div>
              </td>`

            } else if (i == 3) {//本地状态高亮

              if (y.maStatusDesc == "本地") {
                var color = '#FF2D2D'

              } else {
                var color = '#fff'
              }
              return x1 + `<td style="text-align:center;color:${color}">${y[rowT[i]] == null ? '' : y[rowT[i]]}</td>`
            } else if (i == 5) {//打开状态高亮

              if (y.ssStatusDesc == "打开") {
                var color = '#FFE746'

              } else {
                var color = '#fff'
              }
              return x1 + `<td style="text-align:center;color:${color}">${y[rowT[i]] == null ? '' : y[rowT[i]]}</td>`
            } else {
              return x1 + `<td style="text-align:center;">${y[rowT[i]] == null ? '' : y[rowT[i]]}</td>`

            }

          } else {


            if (y[rowT[i] + 'Rowspan'] != 0) {
              return x1 + `<td style="text-align:center;" rowspan=${y[rowT[i] + 'Rowspan']}>${y[rowT[i]] == null ? '' : y[rowT[i]]}</td>`
            } else {
              return x1
            }

          }


        }, '')
        + `</tr>`
    }, ''))


    // // 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码
    // var html = "<html><head><meta charset='utf-8' /></head><body><table style='width: 100%;' border='1'>" +
    //   "<caption style='font-size:36px;' rowspan=2>" + tname + "运行总览</caption>" + document.getElementsByTagName("table")[0].innerHTML + "</table></body></html>";
    // // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
    // var blob = new Blob([html], { type: "application/vnd.ms-excel" });
    // var a = document.getElementById("exportTable");
    // // 利用URL.createObjectURL()方法为a元素生成blob URL
    // a.href = URL.createObjectURL(blob);
    // // 设置文件名
    // a.download = tname + "运行总览.xls";


  }
}
